<template>
  <div class="video-box" ref="videoBox">
    <vue3VideoPlay
      width="100%"
      ref="video"
      v-if="flag"
      :autoPlay="false"
      :loop="false"
      :title="props.name"
      :src="urls + props.url"
      :poster="urls + props.url + '?ci-process=snapshot&time=1&format=jpg'"
      @play="onPlay"
      @pause="onPause"
      @timeupdate="onTimeupdate"
      @canplay="onCanplay"
    />
  </div>
</template>

<script setup lang="ts">
import { accountReplace } from '@/api/user/user';
import { urls } from '@/utils/request/upload';
import { watch } from 'vue';
import { reactive, nextTick, ref, onMounted } from 'vue';
const videoBox = ref(null);
const video = ref(null);
const flag = ref(false);
const props = defineProps({
  url: {
    type: String,
  },
  name: {
    type: String,
  },
  iconColor: {
    type: String,
    default: '#262933',
  },
  background: {
    type: String,
    default: '#FFFFFF',
  },
  description: {
    type: String,
  },
  isPlay: {
    // 自定义播放/暂停
    type: Boolean,
    default: true,
  },
  //   audio: {
  //     type: Object,
  //   },
});
const emits = defineEmits(['VideoPaly']);
// const options = reactive({
//   src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
//   poster: '', //封面
// })
// nextTick(() => {
//   alert(urls + props.url);
// });

const onPlay = (ev) => {
  // console.log(ev, '播放');
  emits('VideoPaly', ev.type);
};
const onPause = () => {
  // console.log(ev, '暂停');
};

const onTimeupdate = (ev) => {
  //   console.log(ev, '时间更新')
};
const onCanplay = (ev) => {
  //   console.log(ev, '可以播放')
};
const animation = () => {
  let canTrigger = true; // 标记是否可以触发

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting && canTrigger) {
        nextTick(() => {
          flag.value = true;
        });
        // console.log(flag.value, 'flag.value');
      } else {
        // flag.value = false;
      }
    });
  });
  observer.observe(videoBox.value);
};
onMounted(() => {
  animation();
});
watch(
  () => props.isPlay,
  () => {
    video.value.pause();
  },
);
</script>

<style scoped lang="less">
.video-box {
  width: 100%;
  margin-bottom: 26px;
  /* display: none; */
  :deep(.icon-web-screen) {
    display: none;
  }
  :deep(.d-tool-item:nth-child(5)) {
    display: none !important;
  }
  :deep(.d-play-btn) {
    background: transparent;
    i {
      display: none;
    }
  }
  :deep(.d-play-btn::before) {
    content: '';
    display: block;
    width: 50px;
    height: 50px;
    background-image: url('https://static-1316349889.cos.ap-shanghai.myqcloud.com/template/template16/templateVector.png');
    background-repeat: no-repeat;
    background-size: 50px 50px;
  }
}
</style>
